<template>
  <hips-view>
    <hips-nav-bar
      slot="header"
      title="Indicator 指示器"
      :back-button="{
        showLeftArrow: true,
      }"
      @nav-bar-back-click="$router.back()"
    />
    <demo-block title="标签用法">
      <hips-button
        type="primary"
        block
        @click="show = true"
      >
        默认加载
      </hips-button>
      <hips-indicator
        v-model="show"
        @click-overlay="overlayClick"
      />
      <br>

      <hips-button
        type="primary"
        block
        @click="show1 = true"
      >
        包裹层背景透明
      </hips-button>
      <hips-indicator
        v-model="show1"
        :pure-background="true"
        @click-overlay="overlayClick"
      />
      <br>

      <hips-button
        type="primary"
        block
        @click="show2 = true"
      >
        传入SVG显示
      </hips-button>
      <hips-indicator
        v-model="show2"
        :svg-src="svgSrc"
        text="加载中"
        @click-overlay="overlayClick"
      />
    </demo-block>

    <demo-block title="插件用法">
      <hips-button
        type="warning"
        block
        @click="showPlugin"
      >
        插件控制
      </hips-button>
    </demo-block>

    <demo-block title="自定义插槽">
      <hips-button
        type="warning"
        block
        @click="show3 = true"
      >
        自定义插槽
      </hips-button>
      <hips-indicator
        v-model="show3"
        @click-overlay="overlayClick"
      >
        <div :style="customStyle">
          自定义内容
        </div>
      </hips-indicator>
    </demo-block>
  </hips-view>
</template>

<script>
import CircleSvg from '@/assets/circle.svg';

import BasicView from '@/mixin/basic-view';
import { Button } from '@hips/vue-ui';

export default {
  components: {    
    [Button.name]: Button,
  },
  mixins: [ BasicView ],
  data() {
    return {
      show: false,
      show1: false,
      show2: false,
      show3: false,
      svgSrc: CircleSvg,
      customStyle: {
        background: '#fff',
        width: '150px',
        textAlign: 'center',
        lineHeight: '50px',
        border: '1px solid #1f8ceb',
      },
    };
  },
  methods: {
    overlayClick() {
      this.show = false;
      this.show1 = false;
      this.show2 = false;
      this.show3 = false;
    },

    showPlugin() {
      this.$hips.indicator.show({
        text: '加载中',
      });

      const timer = setTimeout(() => {
        clearTimeout(timer);
        this.$hips.indicator.hide();
      }, 3000);
    },
  },
};
</script>
